<template>
  <view class="center">
    <view class="h1">
      欢迎注册</br>
      黑娃的记账本
    </view>
    <view class="form_div">
      <view class="form_li">
        <u--input placeholder="请输入注册手机号" maxlength="11" border="none" fontSize="18px" type="number" pattern="[0-9]*"
          oninput="this.value=this.value.replace(/\D/g,'');" v-model="phone"></u--input>
      </view>
      <view class="form_li">
        <u--input :password="is_password" fontSize="18px" border="none" placeholder="请设置密码" v-model="password">
          <template slot="suffix">
            <u-icon @click="is_password = !is_password" :name="is_password ? 'eye-fill' : 'eye-off'"></u-icon>
          </template>
        </u--input>
      </view>
      <view class="form_li">
        <u--input :password="is_verifyPassword" fontSize="18px" border="none" placeholder="请再次确认密码" v-model="verifyPassword">

          <template slot="suffix">
            <u-icon @click="is_verifyPassword = !is_verifyPassword"
              :name="is_verifyPassword ? 'eye-fill' : 'eye-off'"></u-icon>
          </template>
        </u--input>
      </view>
      <view class="form_li">
        <u--input placeholder="请设置您的昵称" maxlength="11" border="none" fontSize="18px" type="text" v-model="username"></u--input>
      </view>
      <view class="button_div flex_center flex_column">
        <u-button class="login" @click="login" text="立即注册" color="#5394F2"></u-button>
        <div class="register" @click="goLogin">立即登录</div>
      </view>
    </view>
  </view>
</template>

<script>
import { regExp } from "@/utils/regExp";
export default {
  components: {},
  data() {
    return {
      phone: '', //账号
      password: '',//密码
      verifyPassword: '',//确认密码
      username: '',//昵称
      is_password: true, //密码展示
      is_verifyPassword: true, //确认密码展示

    }
  },
  created() { },
  onLoad() { },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return regExp.mobilePhone.test(val);
    },
    blurFun() {
      if (!this.phone || this.phone == "") {
        this.$u.toast("请输入手机号");
        return false;
      }
      if (!this.validator(this.phone)) {
        this.$u.toast("请输入正确的手机号");
        return false;
      }
      if (!this.password || this.password == "") {
        this.$u.toast("请输入密码");
        return;
      }
      if (!this.verifyPassword || this.verifyPassword == "") {
        this.$u.toast("请确认密码");
        return;
      }
      if (this.password != this.verifyPassword) {
        this.$u.toast("两次密码不一致");
        return false;
      }
      if (!this.username || this.username == "") {
        this.$u.toast("请输入您的昵称");
        return;
      }
      return true;
    },
    login() {
      if (!this.blurFun()) return false;
      this.$Ajax({
        url: "user/register",
        data: {
          phone: this.phone,
          password: this.password,
          username: this.username
        },
        method: 'post'
      }).then(res => {
        console.log(res)
        this.$u.toast('注册成功');
        setTimeout(()=>{
          this.goLogin();
        },2000)
      })
    },
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
};
</script>

<style lang="scss">
.center {
  padding: 80rpx 0 40rpx 0;
  height: 60vh;

  .h1 {
    font-size: 70rpx;
    color: #000;
    font-family: '楷体';
    padding: 0 80rpx;
    line-height: 80rpx;
    // text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  .form_div {
    margin: 18vh auto 0 auto;
    width: calc(100% - 160rpx);

    .form_li {
      margin-bottom: 40rpx;
      border:2rpx solid #ccc;
			border-radius: 10rpx;
			padding:16rpx 14rpx;
    }
  }
}

.button_div {
  margin-top: 120rpx;
  padding: 0 80rpx;

  .login {
    width: 380rpx;
    height: 90rpx;
    border-radius: 12rpx;
  }

  .register {
    margin-top: 18rpx;
    font-size: 24rpx;
    color: #1b8df7;
  }
}
</style>